<template>
  <van-tree-select
    class="sidebar"
    :items="items"
    :main-active-index.sync="active"
    height="100%"
    @click-nav="getdata(items[active].text)"
  >
    <template #content>
      <van-grid square>
        <van-grid-item
          icon="photo-o"
          :text="item.brand"
          @click="getBrand(index)" class="grid"  v-for="(item, index) in categoryName"
        :key="index"
        />
      </van-grid>
    </template>
  </van-tree-select>
</template>
  
  <script>
import axios from "axios";
export default {
  name: "Sidebar",
  data() {
    return {
      active: 0,
      items: [{ text: "分组 1" }, { text: "分组 2" }],
      categoryName: [],
      category: "",
      id: "",
      brand: "",
     
    };
  },
  created() {
    axios({
      url: "/api/pro/categorylist",
    })
      .then((res) => {
        // console.log(res.data.data);
        if (res.data.code == 200) {
          var arr = res.data.data;
          var obj = {};
          for (const key in arr) {
            obj[key] = arr[key];
          }
          var newobj = Object.keys(obj).map((item) => ({ text: obj[item] }));
          this.items = newobj;
        }
      })
      .catch((err) => {
        console.log("err", err);
      });
  },
  methods: {
    getdata(str) {
      this.category = str;
      console.log(this.category);
      axios({
        url: "api/pro/categorybrandlist",
        params: {
          category: this.category,
        },
      })
        .then((res) => {
          console.log("seacrh", res.data.data);
          this.categoryName = res.data.data;
       
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    goBack() {
      this.$router.back(); //回退
    },
    getBrand(idx) {
      // to='/Brand'
      // console.log(this.categoryName[idx].brand );
      this.brand = this.categoryName[idx].brand;
      this.$router.push(`/Brand?category=${this.category}&brand=${this.brand}`);
    },
  },
};
</script>
  <style scoped>
.sidebar {
  width: 100%;
  /* height: 100%; */
}
</style>
  
  